<template>
  <view>
    <text class="head"> 注册</text>
    <form class="form_view" @submit="onSubmit">
      <view class="input_box">
        <input
          class="input"
          type="text"
          v-model="formData.username"
          placeholder="请输入用户名"
        />
        <DeleteIcon
          v-show="formData.username"
          @click="formData.username = ''"
        ></DeleteIcon>
      </view>
      <view class="input_box">
        <input
          class="input"
          type="text"
          v-model="formData.phone"
          placeholder="请输入手机号"
        />
        <DeleteIcon
          v-show="formData.phone"
          @click="formData.phone = ''"
        ></DeleteIcon>
      </view>
      <view class="input_box">
        <input
          class="input"
          type="password"
          v-model="formData.password"
          placeholder="请输入账号密码"
        />
        <DeleteIcon
          v-show="formData.password"
          @click="formData.password = ''"
        ></DeleteIcon>
      </view>

      <view class="input_box">
        <input
          class="input"
          type="password"
          v-model="formData.qpassword"
          placeholder="请确认密码"
        />
        <DeleteIcon
          v-show="formData.qpassword"
          @click="formData.qpassword = ''"
        ></DeleteIcon>
      </view>

      <!-- <Agreement></Agreement> -->

      <view class="submit_view">
        <up-button
          :hairline="false"
          color="#eb5757"
          text="注册"
          shape="circle"
          class="submit_btn"
          form-type="submit"
          loadingText="注册中..."
          :loading="btnloading"
          loadingSize="20"
        ></up-button>
      </view>
    </form>
    <u-toast ref="uToastRef"></u-toast>
    <view class="toggle">
      <text class="text" @click="emits('toggle', 2)">已注册,去登录 &gt;</text>
    </view>
  </view>
</template>

<script setup>
import { reactive, toRaw, ref } from "vue";
import DeleteIcon from "./DeletcIcon.vue";
import Agreement from "./Agreement.vue";
import { handleRegister } from "../modules/api";
const uToastRef = ref(null);

const formData = reactive({
  username: "",
  phone: "",
  password: "",
  qpassword: "",
});
const btnloading = ref(false);
const emits = defineEmits(["register","toggle"]);


// 注册接口

function onSubmit() {
  const keys = Object.keys(toRaw(formData));
  const pass = keys.every((key) => {
    if (!formData[key]) {
      return false;
    }
    return true;
  });
  if (!pass) {
    uToastRef.value?.show({
      message: "请按要求填写完整信息",
      position: "center",
    });
    return;
  }
  btnloading.value = true;
  handleRegister(toRaw(formData)).then((resp) => {
    console.log(resp);
    if (resp) {
      let type = "default";
      if (resp.code == 1) {
        type = "success";
        emits("register"); //注册成功
      } else {
        type = "error";
      }
      uToastRef.value?.show({
        message: resp?.message,
        type: type,
        position: "center",
      });
    }

    btnloading.value = false;
  });
}
</script>

<style lang="scss" scoped>
@import "./form.scss";
</style>
